﻿@page
@using SXFramWork.Web
@{
    ViewData["Title"] = "权限管理";
    Layout = AdminLayout.Pjax(HttpContext);
}
    <div id="container">
        <style>

            .l440 .layui-nav-title {
                width: 100%;
                height: 70px;
                line-height: 70px;
                background: #d9dee4;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: bold;
                text-indent: 20px;
                background-color: #ffffff;
                position: relative;
                font-weight: normal;
                border-bottom: 1px solid #e4eaec;
            }


            .role {
                overflow: auto;
            }

                .role li a {
                    display: block;
                    padding: 10px 20px;
                }

                .role li.active a {
                    background-color: #f3f7f9;
                    color: #409eff;
                }

            .menu-save {
                padding: 10px;
                text-align: center;
            }
        </style>
        <div id="app">

            <div class="layui-col-220 l220">
                <div class="layui-nav-title">角色列表</div>
                <ul class="role">
                    <li :class="index==roleActive?'active':''" v-for="(it,index) in roleList" v-cloak @@click="roleGoMenu(it,index)"><a href="javascript:void(0)">{{it.name}}</a></li>
                </ul>
            </div>
            <div class="right-col-body l440" style="padding:0 10px 0 10px">
                <div class="layui-nav-title" style="background-color:#d9dee4" >权限列表</div>
                <div class="layui-tab" style="margin:5px 0 0 0 !important">
                    <ul class="layui-tab-title">
                        <li class="layui-this">Web端</li>
                        <li>APP应用</li>
                    </ul>

                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="menu-wall soa-cur" style="padding-bottom: 0px;">
                                <div id="toolbarDiv" style="overflow: auto">
                                    <ul id="demoTree" class="dtree" data-id="0"></ul>
                                </div>
                            </div>

                        </div>

                        <div class="layui-tab-item">
                            <div class="menu-wall soa-cur" style="padding-bottom: 0px;">
                                <div id="toolbarDiv2" style="overflow: auto">
                                    <ul id="demoTree2" class="dtree" data-id="0"></ul>
                                </div>
                            </div>
                            @*<div class="menu-save layui-cur-submit" style="border-top: 1px solid #f5f6f7">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="fun.saveMenu()">保存权限</button>
                </div>*@
                        </div>


                    </div>

                    <div class="menu-save layui-cur-submit" style="border-top: 1px solid #f5f6f7;">
                        <button type="button" style="position:fixed;top:110px;right:120px;" class="layui-btn layui-btn-normal" onclick="fun.saveMenu()">保存</button>
                    </div>

                    <div class="menu-save layui-cur-submit" style="border-top: 1px solid #f5f6f7;">
                        <button type="button" style="position:fixed;top:110px;right:30px;" class="layui-btn" onclick="fun.clear()">重置</button>
                    </div>
                </div>


                @*<div class="menu-wall soa-cur" style="padding-bottom: 0px;">

                    <div id="toolbarDiv" style="overflow: auto">
                        <ul id="demoTree" class="dtree" data-id="0"></ul>
                    </div>


                    <div class="menu-save layui-cur-submit" style="border-top: 1px solid #f5f6f7">
                        <button type="button" class="layui-btn layui-btn-normal" id="submit" onclick="fun.saveMenu()">保存权限</button>
                    </div>
                </div>*@
            </div>
        </div>
        <script>
            var os, $, fun, vm = new Vue({
                el: '#app',
                data: {
                    roleList: [],
                    roleActive: -1,
                    roleGuid: ''
                },
                methods: {
                    roleGoMenu: function (m, index) {
                        var that = this;
                        that.roleActive = index;
                        that.roleGuid = m.id;
                        fun.permissionList(m.id);
                        fun.permissionList2(m.id);
                    }




                }
            });
            layui.use(['table', 'layer', 'jquery', 'common', 'dtree'],
                function () {
                    $ = layui.jquery,
                        os = layui.common,
                        dtree = layui.dtree

                    $('.layui-tree-cus').css({ 'height': $(window).height() - 206 });
                    $('.role').css({ 'height': $(window).height() - 132 });
                    fun = {
                       
                        permissionList: function (roleid) {
                            dtree.render({
                                url: "/api/admin/sysrolepermission/getpermission?roleId=" + roleid +"&Platform=0", // 使用url加载（可与data加载同时存在）
                                elem: "#demoTree",
                                method: "GET",
                                async: false,
                                checkbar: true,
                                checkbarType: "p-casc",//单向级联
                                line: true,  // 显示树线
                                icon: "2",  //修改二级图标样式
                                scroll: "#toolbarDiv", // 绑定div元素
                                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                                dataFormat: "list",  //配置data的风格为list
                                initLevel: "2",
                                //request: { roleId: vm.roleGuid },
                                response: { message: "msg", statusCode: 1 },  //修改response中返回数据的定义
                            });
                        },
                        permissionList2: function (roleid) {
                            dtree.render({
                                url: "/api/admin/sysrolepermission/getpermission?roleId=" + roleid +"&Platform=1", // 使用url加载（可与data加载同时存在）
                                elem: "#demoTree2",
                                method: "GET",
                                async: false,
                                checkbar: true,
                                checkbarType: "p-casc",
                                line: true,  // 显示树线
                                icon: "2",  //修改二级图标样式
                                scroll: "#toolbarDiv2", // 绑定div元素
                                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                                dataFormat: "list",  //配置data的风格为list
                                initLevel: "0",
                                //request: { roleId: vm.roleGuid },
                                response: { message: "msg", statusCode: 1 },  //修改response中返回数据的定义
                            });
                        },



                        //根据部门查询角色
                        initRole: function (guid) {
                            os.ajax('api/admin/sysrole/list', { size: 1000 }, function (res) {
                                vm.roleList = res.data.rows;



                            }, 'get');
                        },
                        saveMenu: function () {
                           
                            var params = dtree.getCheckbarNodesParam("demoTree");;
                            params= params.concat(dtree.getCheckbarNodesParam("demoTree2"));
                             
                            //params. = dtree.getCheckbarNodesParam("demoTree2");
                            var arr = new Array();
                            var nodes = params;
                            //console.log(nodes);
                            for (var i in nodes) {
                                //console.log(nodes[i].nodeId)
                                arr.push(nodes[i].nodeId);
                            }
                            //console.log(arr);
                            if (vm.roleGuid == '') {
                                os.error('请先选择要授权的角色');
                                return;
                            }
                            os.ajax('api/admin/sysrolepermission/add', { list: arr, roleId: vm.roleGuid }, function (res) {
                               
                               
                                if (res.code === 1) {
                                    os.success('角色授权成功');
                                } else {
                                    os.error(res.msg);
                                }
                                //$('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                            });
                          

                        },

                        clear: function () {
                            $(".dtreefont dtree-icon-fuxuankuang dtree-theme-dtreefont dtree-theme-checkbox ").attr('data-checked', 0);
                        }
                    };
                    fun.permissionList('');
                    fun.initRole('');
                    fun.permissionList2('');
                });
        </script>
    </div>
